<!--
 * @Description: 该组件的作用是，隐藏手机号码点击才能显示
 * @Author: zdq
 * @Date: 2024-12-16 20:33:15
 * @LastEditTime: 2024-12-16 20:54:56
 * @LastEditors: zdq
 * @Reference: 
-->
<script setup lang="ts">
  /**
   * 该组件的作用是，隐藏手机号码点击才能显示
   */

  import { ref } from 'vue'

  const props = defineProps({
    text: {
      type: String,
      required: true,
    },
  })

  const isShow = ref(false)

  const handleShow = () => {
    isShow.value = !isShow.value
  }
</script>

<template>
  <span>
    {{ isShow ? text : text && text.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2') }}
    <svg-icon v-if="text" :icon-class="!isShow ? 'eye' : 'eye-open'" @click.stop="handleShow" />
  </span>
</template>

<style lang="scss" scope>
  .icon {
    cursor: pointer;
  }
</style>
